<template>
   <a-modal :visible="props.show" width="856px" class="ckd-dialog" :on-before-cancel="close">
    <template #title>
      <div class="ckd-dialog-title w-full h-[56px] flex justify-between items-center">添加角色</div>
    </template>
    <div class="pop-content-box w-full h-auto overflow-hidden box-border">
      <!-- 内容 - 开始 -->
       <div class="line-1-box w-full h-[32px] overflow-hidden box-border flex justify-start items-center">
        <a-row class="h-full">
          <a-col :span="12" class="h-full">
            <a-form-item label="用户账号" class="m-0"><a-input v-model="userAccount" placeholder="请输入" :disabled="true"></a-input></a-form-item>
          </a-col>
          <a-col :span="12" class="h-full relative left-[20px]">
            <a-form-item label="用户名称" class="m-0"><a-input v-model="userName" placeholder="请输入" :disabled="true"></a-input></a-form-item>
          </a-col>
        </a-row>
       </div>
       <div class="title-line w-full h-[24px] m-[16px_0] text-[#394D73] text-[16px] font-bold">
        添加角色
       </div>
       
       <div class="w-full h-[40px] overflow-hidden box-border flex justify-between items-center">
        <span>
          <a-input 
            v-model="findRoleStr" placeholder="请输入角色名称" allow-clear
            @clear="() => {findRoleStr = ''; getAllRoles();}" style="width: 350px;"
          >
            <template #suffix>
              <icon-search class="cursor-pointer" @click="getAllRoles" />
            </template>
          </a-input>
        </span>
        <span>
          <!-- <a-button @click="() => {findRoleStr = ''; getAllRoles();}">重置</a-button>
          <a-button type="primary" class="ml-2" @click="getAllRoles">查询</a-button> -->
        </span>
       </div>

       <div class="w-full h-[32px] flex justify-between items-center">
        <span>
          已选 <i>{{ selectedKeys.length }}</i>项 <a-link v-if="selectedKeys.length" @click="selectedKeys=[]">取消</a-link>
        </span>
        <span></span>
       </div>

       <div class="data-list-box w-full h-[200px] overflow-hidden box-border">
        <a-table
          :columns="Columns" :data="listData" :pagination="false" :scroll="{y: '100%', x: '100%'}"
          row-key="id"
          :row-selection="{
            type: 'checkbox',
            showCheckedAll: true,
            onlyCurrent: false,
          }"
          v-model:selectedKeys="selectedKeys"
        >
          <template #role_name="{ record }">
            <span>{{ record.role_name }}</span>
          </template>
          <template #role_desc="{ record }">
            <span>{{ record.role_desc }}</span>
          </template>
          <template #order="{ record }">
            <span>{{ record.sort }}</span>
          </template>
        </a-table>
       </div>
       <div class="page-box w-full h-[40px] overflow-hidden box-border flex justify-end items-center">
        <a-pagination :total="page.total" :page-size="page.page_size" :current="page.page"></a-pagination>
       </div>
      <!-- 内容 - 结束 -->
    </div>
    <template #footer>
      <a-button @click="close">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick, type PropType } from 'vue';
import * as Api from '@/api/user';
import { Message } from '@arco-design/web-vue'
import { useRoute } from 'vue-router'


const route = useRoute()
const Columns = [
  {
    title: '角色名称',
    dataIndex: 'role_name',
    key: 'role_name',
    width: 200,
  },
  {
    title: '角色描述',
    dataIndex: 'role_desc',
    key: 'role_desc',
  },
  {
    title: '排序',
    dataIndex: 'order',
    key: 'order',
    width: 200,
  },
]

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
})
const emits = defineEmits(['close', 'save', 'submit'])
const userAccount = ref(route.params.account as string)
const userName = ref(route.query.uname as string)
const listData = ref<any[]>([])
const page = ref({
  page: 1, page_size: 20, total: 0
})
const selectedKeys = ref<any>([])
const findRoleStr = ref('')

function submit() {
  if (userAccount.value === '') {
    Message.error('请输入用户账号')
    return
  }
  if (selectedKeys.value.length === 0) {
    Message.error('请选择角色')
    return
  }
  addRole()
}

function close() {
  emits('close')
  return false
}

function getUserBindRoles() {
  Api.getUserRoles(userAccount.value, {
    page: 1, page_size: 1e2
  }).then(rs => {
    if (rs.code === 200 && rs.data) {
      selectedKeys.value = rs.data.map((item: any) => item.role_id)
    }
  })
}

function getAllRoles() {
  Api.getRoleList(page.value, findRoleStr.value).then(rs => {
    if (rs.code === 200 && rs.data) {
      listData.value = rs.data.filter((item: any) => item.status)
      page.value.page = rs.page as number
      page.value.total = rs.total as number
    }
  })
}

function addRole() {
  Api.userBindRoles(userAccount.value, selectedKeys.value).then(rs => {
    const { code, message } = rs as any
    if (code === 200) {
      Message.success('添加成功')
      close()
      emits('save')
    } else {
      Message.error(message)
    }
  })
}

watch(() => props.show, (val) => {
  if (val) {
    getAllRoles()
    getUserBindRoles()
  }
}, {
  immediate:true
})
</script>

<style lang="less" scoped>
.content-box{
  .arco-form{
    :deep(.arco-form-item-content) {
      box-sizing: border-box; padding-right: 200px;
    }
  }
}
</style>

<style lang="less">
.ckd-dialog-title{
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  color: #394D73;
}
.ckd-dialog{
  .arco-modal-wrapper{
    .arco-modal{
      .arco-modal-header{
        border-bottom: 0!important;
      }
      .arco-modal-footer{
        border-top: 0!important;
      }
    }
  }
}
</style>

